iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
2
Modern Web

鉄人28号FX系列 第 4

鉄人28号FX 鉄人4号「字戰隊」font-family

  • 分享至 

  • xImage
  •  

★ 村外西南方小樹林 ↓↓↓

顯示樹林位置圖

也不知道村長什麼意思?
邊走邊打開手上紙條,
上面寫著

(疑~)字體與字型使用區別:

  • 字體:泛指不同家族,明體、黑體和書寫字體等。
  • 字型:思源宋體、新細明體和 Helvetica 等電腦用字。

:前方有人?
瞬間! )

Σ(lliд゚ノ)ノ:
你 你們到底是誰?

:既然你誠心誠意的發問了,
:我們就大發慈悲的告訴你,
:為了防止「inline」世界被破壞,
:為了守護排印世界的和平~~

等等!!!
你這擺明抄襲某~~

:小子,我們就是傳說中,
完全被忽視 XD )
基紐特戰隊
( 註 圖片來源:七龍珠 基紐特戰隊 )


★★★ 關卡條件 ↓↓↓

五大字戰隊(font-family)

serif:襯線字體 (明體)。筆劃結尾有特殊的裝飾線或襯線,(喇叭形或錐形末端),字體通常按比例間隔。在粗筆劃和細筆劃之間顯示更大的差異,較無襯線字體更適用於長篇小說內文。

如 Mincho (日語),Sung 或 Song (中文),Batang (韓語-明朝體) 或 Naskh (阿拉伯語) 風格任何如此描述的字體都可用於表示通用的 serif 系列。

樣本襯線字體


sans-serif:無襯線字體 (黑體)。通常是低對比度 (垂直和水平筆劃具有接近相同的厚度),並且具有平滑的筆劃結尾,沒有任何擴口,交叉筆劃或其他裝飾,字體通常按比例間隔。常常給人機械、幾何的清淨感,有時夾帶些許人文氣息,並可提高辨識的功能性。

如 Gothic (日語),Hei (中文)或 Gulim (韓語-歌德體)。如此描述的任何字體都可用於表示通用的 sans-serif 系列。

樣本sans-serif字體

註:無襯線體約為 19 世紀末葉發明,名稱原指 grotesque 很怪的東西。現有許多形態 (粗細對比較高、疑似帶有襯線),詳細可參考 justfont blog ( sans-serif 篇 )


monospace:等寬字體 (mono 為單一意思)。泛指字元寬度相同的定寬字體 (fixed width)。按等寬間隔,是所有字元具有相同的固定寬度。現有程式碼以及文字介面的程式,如虛擬終端機等也經常使用,除了排列整齊,字母之間形狀差異明顯,極適合 debug。

樣本等寬字體


cursive:書寫字體。通常使用更加非正式的文本樣式,更像是手寫筆或筆刷而不是印刷字母 (別名如 Chancery,Brush,Swing 和 Script)。其中一些字符以流動的方式書寫在一起,是為了使書寫更快。隨意的草書是連接和筆式升降機的組合,書寫風格進一步又分為「循環」,「斜體」或「連接」。

樣本草書字體


fantasy:幻想字體主要是裝飾性或表達性字體,包含字符的裝飾或表現形式。瞥除不代表實際字符的 Pi(π) 等。

樣本幻想字體

迷之角色 [字戰隊]
看完盜版基紐特戰隊登場後
有了以上基本認知(我的感受?!)

:回到剛~~

╮(╯_╰)╭
已放棄抵抗。)


字體家族屬性 可區分如下:

  • 字型家族名稱:family-name
    主字型名稱。如 TimesHelvetica 皆是系列之一。字型名稱如中間含括空格時,需加入前後引號 (半形)。

  • 字體通用名稱:generic-name
    當指定主字型家族名稱失效時,這些通用名稱關鍵字可用作一般回退(備選)機制,給出相符合的替代字體 (無需額外添加引號)。如下方替 <body> 增設字型,因Helvetica'Open Sans' 皆為無襯線字體系列,排序最後通用字體理應設定為 sans-serif 以符合前方同類型設定值。

body { font-family:Helvetica, 'Open Sans', sans-serif; }
  • 與其他 CSS 屬性不同,組件值是以半形逗號分隔的列表,表示備選方案
  • 至少選用一個字型家族名稱和一個字體通用名稱。
  • CSS 選擇機制僅提供了在需要替換時,確定最接近替代的方法。
  • 考慮字型的可用性,選擇 Futura 家族名稱會匹配所有,但單指定 'Futura Medium' 其他字重失效。

(|||゚д゚)
看來不太妙 )

偷瞄 )
往旁默默移動中。( 沙沙~~)

對方完全無視
繼續說著:

font-family 屬性指定的是一個優先級從高至低的可選字型列表,字型的選定不是在發現用戶主系統上安裝的列表中的第一個字型時停止。相反,對字型的選擇是逐字進行的,也就是說即使某個字符周圍都在某個字型中可以顯示,但該字符在當前的字型文件中沒有合適,將會繼續嘗試列表中排序後方的字型直到最後列表字體為止。

★ 有效的字型家族名稱需以「字符串」形式引用,這意味著在沒有帶引號的字型家族名稱的開頭是不能使用標點符號字符和數字字符進行轉義。

★ 因無法保證用戶的主系統內已安裝了指定的字型,也不能保證使用 @font-face 樣式屬性提供的外聯字型是否為有效超連結情況下,如無提供通用字體,則使用瀏覽器設置的神秘的默認字體。

...
...
...

To Be Continued ...


[ 追加經驗值 ]
註:參考來源 W3C CSS Fonts Module Level 3
關於 MDN 由 Mozilla Contributors 製作,以 CC-BY-SA 2.5 釋出。


上一篇
鉄人28号FX 鉄人3号「置換象」replaced elements
下一篇
鉄人28号FX 鉄人5号「功能獸」Display vs Text typeface
系列文
鉄人28号FX30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
JinWen
iT邦新手 5 級 ‧ 2019-09-19 16:38:34

發燒中的腦子整個被 基紐特戰隊笑醒XDDDDD

保重身體先,哈

1
RURU Tseng
iT邦新手 2 級 ‧ 2019-09-19 21:53:17

字體大師 letter 真的介紹地很深入詳細,原來以前無襯線竟然叫 grotesque ~ 每天看都收穫滿滿

看更多先前的回應...收起先前的回應...

Σ(lliд゚ノ)ノ:你 你到底是誰?

:隔壁村.平凡.不會打怪.樸實村民

魔貫光殺砲(゚Д゚)σ━00000000000━●

PH iT邦研究生 5 級 ‧ 2019-09-24 11:30:47 檢舉

這樓很歪

0
Titangene
iT邦新手 4 級 ‧ 2019-09-19 23:30:29

受益良多,好多沒看過的關鍵字,需要時間慢慢消化 ?

我也是看 基紐特戰隊 才懂的

tsuifei iT邦新手 4 級 ‧ 2019-09-20 17:53:16 檢舉

真是的,基紐特戰隊的時代我應該是忙著縫補和米油吧,嗚嗚~

都走過來了!搭肩

我要留言

立即登入留言